import "./index.scss";
import { defineComponent, computed, type PropType } from "vue";

const props = {
  defaultValue: {
    type: [String, Number],
    require: false,
    default: ""
  },
  tagStyle: {
    type: [Function, Object],
    require: false,
    default: () => null
  },
  //  tag 类型 目前两种   default  point
  type: {
    type: String as PropType<CommonTable.TagType>,
    default: "default"
  },
  value: {
    type: [String, Number],
    default: ""
  },
  label: {
    type: String,
    require: false,
    default: ""
  },
  option: {
    type: Object as PropType<CommonTable.TableTagOptionType>,
    default: () => new Map()
  }
};

export default defineComponent({
  name: "ReTableTag",
  props,
  setup(props) {
    const o = computed(() => {
      let t = null;
      if (!props.value) {
        t = {
          value: "unknown",
          label: "未知",
          rgb: "125, 125, 125"
        };
      } else if (!props.option.get(props.value) && props.defaultValue) {
        t = props.option.get(props.defaultValue);
      } else {
        t = props.option.get(props.value);
      }
      if (!t) {
        const [firstO] = props.option.values();
        t = firstO;
      }
      return t;
    });

    if (!props.label && !o.value.label) return null;

    const tagStyleFn = computed(() => {
      if (props.tagStyle) {
        if (typeof props.tagStyle === "function") {
          return props.tagStyle();
        } else {
          return props.tagStyle;
        }
      }
      return {};
    });

    const tagDefault = () => {
      const style = {};
      if (o.value.rgb) {
        style["color"] = `rgba(${o.value.rgb}, 1)`;
        style["borderColor"] = `rgba(${o.value.rgb}, .2)`;
        style["backgroundColor"] = `rgba(${o.value.rgb}, .1)`;
      } else {
        style["color"] = o.value.color;
        style["borderColor"] = o.value.borderColor || o.value.color;
        style["backgroundColor"] = o.value.backgroundColor;
      }
      return (
        <div class="table-tag-content" style={style}>
          {props.label || o.value.label}
        </div>
      );
    };

    const tagPoint = () => {
      const color = o.value.rgb ? `rgb(${o.value.rgb})` : o.value.color;
      return (
        <div class="table-tag-content-point">
          <div class="point" style={{ backgroundColor: color }}></div>
          <div class="text" style={{ color }}>
            {props.label || o.value.label}
          </div>
        </div>
      );
    };

    return () => (
      <div class="table-tag" style={tagStyleFn.value}>
        {!props.type || props.type === "default" ? tagDefault() : props.type === "point" ? tagPoint() : null}
      </div>
    );
  }
});
